<template>
  <FullscreenCard class="wrapper">
    <div class="grid-popover" v-show="codeSelectVisible">
      <div class="select-wrapper">
        <div class="select-title">
          <b>选择监测点</b>
          <span>已选&nbsp;<span class="active">{{ filterCheckedVal.length }}</span>/{{ filterListAll.length }}</span>
        </div>
        <div class="select-body">
          <el-input
            v-model="filterVal"
            placeholder="请输入"
            suffix-icon="el-icon-search"
            @input="onChangeFilterList"
          />
          <div class="select-group">
            <el-checkbox-group v-model="filterCheckedVal" @change="onChangeGroup">
              <el-checkbox
                v-for="item in filterList"
                :key="item.id"
                :label="item.id"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="his-body" :style="{'height': calcHeight}">
      <div class="grid" ref="gridDom"></div>
    </div>
	</FullscreenCard>
</template>

<script setup lang="ts">
import { ClickOutside as vClickOutside } from 'element-plus'
import * as echarts from 'echarts'
import FullscreenCard from '@/components/FullscreenCard'

const codeSelectVisible = ref<Boolean>(false)
const tabs = ref<any>([{
  id: '1',
  name: '#1酒甑用能系统'
},{
  id: '2',
  name: '#2酒甑用能系统'
},{
  id: '3',
  name: '#1冰缸循环水系统'
},{
  id: '4',
  name: '#2冰缸循环水系统'
}])
const filterVal = ref<any>('')
const filterCheckedVal = ref<any>(['2', '3', '4', '5'])
const filterListAll = ref<any>([{
  id: '1',
  name: '过热蒸汽阀门指令'
},{
  id: '2',
  name: '过热蒸汽阀门开度'
},{
  id: '3',
  name: '过热蒸汽瞬时流量'
},{
  id: '4',
  name: '过热蒸汽累计流量'
},{
  id: '5',
  name: '过热蒸汽压力'
},{
  id: '6',
  name: '过热蒸汽温度'
},{
  id: '7',
  name: '饱和蒸汽流量'
},{
  id: '8',
  name: '酒甑综合能耗'
}])
const filterList = ref<any>([{
  id: '1',
  name: '过热蒸汽阀门指令'
},{
  id: '2',
  name: '过热蒸汽阀门开度'
},{
  id: '3',
  name: '过热蒸汽瞬时流量'
},{
  id: '4',
  name: '过热蒸汽累计流量'
},{
  id: '5',
  name: '过热蒸汽压力'
},{
  id: '6',
  name: '过热蒸汽温度'
},{
  id: '7',
  name: '饱和蒸汽流量'
},{
  id: '8',
  name: '酒甑综合能耗'
}])
const searchForm = ref<any>({
  sid: '1',
  type: 'chart', // list、chart
})
  

const gridDom = ref<any>(null)

const calcHeight = computed(() => {
  const _h = Math.ceil(filterCheckedVal.value.length/2)*400
  return _h < 1000 ? `calc(100vh - 112px)` : _h+'px'
})

const onClickOutside = () => {
  codeSelectVisible.value = false
}

const getData = () => {
  initChart()
}
const onChangeName = () => {
  initChart()
}
const onChangeGroup = () => {
  initChart()
}
const onChangeFilterList = () => {
  if(!filterVal.value)filterList.value = filterListAll.value.slice()
  filterList.value = filterListAll.value.filter((v:any) => v.name.includes(filterVal.value))
}

const initChart = () => {
  const myChartGrid = echarts.init(gridDom.value)
  myChartGrid.clear()
  myChartGrid.resize()
   // 获取选择的监测点
  const filters = filterListAll.value.filter((v:any) => filterCheckedVal.value.includes(v.id))
  // console.log('filters', filters)
  const gridData = filters.map((v:any, i:number) => ({
    top: Math.floor(i/2) === 0 ? '50px' : `${Math.floor(i/2)*400+50}px`,
    left: i % 2 === 0 ? '5%' : '55%',
    width: '40%',
    height: '300px',
  }))
  const xAxisData = filters.map((v:any, i:number) => ({
    gridIndex: i,
    type: 'category',
    boundaryGap: false,
    // 分割线
    splitLine: { show: false },
    // 坐标轴线
    axisLine: { show: false },
    // 刻度线
    axisTick: { show: false },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }))
  const yAxisData = filters.map((v:any, i:number) => ({
    gridIndex: i,
    type: 'value',
    min: (value:any) => value.min,
    max: (value:any) => value.max,
    axisLabel: {
      formatter: '{value}'
    },
    // 分割线
    splitLine: { 
      show: true,
      lineStyle: {
        type: 'dashed' 
      }
    },
    // 坐标轴线
    axisLine: { show: false },
    // 刻度线
    axisTick: { show: false },
  }))
  const seriesData = filters.map((v:any, i:number) => ({
    name: v.name,
    type: 'line',
    xAxisIndex: i,
    yAxisIndex: i,
    smooth: true,
    data: [20, 21, 33, 21, 22, 22, 19],
    lineStyle: {
      width: 3,
      shadowColor: 'rgba(0,0,0,0.3)',
      shadowBlur: 10,
      shadowOffsetY: 10
    },
    markPoint: {
      data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
      ]
    },
    markLine: {
      data: [{ type: 'average', name: 'Avg' }]
    }
  }))
  const option =  {
    title: {
      left: 'center',
      text: 'echart grid'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      left: 'center',
      top: 'bottom'
    },
    toolbox: {
      show: true,
      orient: 'horizontal', 
      x: 'right',
      y: 'top',        
      feature: {
        myCodeSelect: {
          show: true,
          title: '自定义扩展方法',
          icon: 'image:///src/assets/img/icon-grid.png',
          onclick(e: MouseEvent) {
            // console.log('myCodeSelect', codeSelectVisible)
            codeSelectVisible.value = !codeSelectVisible.value
          }
        },
        dataZoom: {
          show: true,
          // yAxisIndex: 'none',
          title: {
            dataZoom: '区域缩放',
            dataZoomReset: '区域缩放后退'
          }
        },
        dataView: {
          show: true,
          title: '数据视图',
          readOnly: true,
          lang: ['数据视图', '关闭', '刷新']
        },
        magicType: {
          show: true,
          title: {
            line: '折线图切换',
            bar: '柱形图切换',
            stack: '堆积',
            tiled: '平铺',
            force: '力导向布局图切换',
            chord: '和弦图切换',
            pie: '饼图切换',
            funnel: '漏斗图切换'
          },
          type: ['line', 'bar'] 
        },
        restore: {
          show: true,
          title: '还原'
        },
        saveAsImage: {
          show: true,
          title: '保存为图片',
          type: 'png',
          lang: ['点击保存']
        },
        
      }
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all'
        }
      ]
    },
    grid: gridData,
    dataZoom: [{
      xAxisIndex: [0, 1, 2, 3],
      yAxisIndex: [0, 1, 2, 3],
      type: 'inside',
      show: true,
      realtime: true,
      start: 0,
      end: 100,
    }, {
      type: 'slider',
      show: true,
      realtime: true,
      start: 0,
      end: 100,
    }],
    xAxis: xAxisData,
    yAxis: yAxisData,
    series: seriesData,
  }

  myChartGrid.setOption(option)

  window.addEventListener('resize', () => {
    myChartGrid.resize()
  })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.wrapper {
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.grid-popover {
  position: absolute; 
  right: 200px; 
  top: 60px;
  z-index: 3000;
  background-color: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  padding: 12px;
}
.select-wrapper {
  min-width: 200px;
  .select-title {
    display: flex;
    justify-content: space-between;
  }
  .select-body {
    padding: 8px 0;
  }
  .select-group {
    .el-checkbox {
      display: block;
      margin-top: 8px;
    }
  }
}
.active {
  color: var(--active-text-color);
}
.his-top {
  display: flex;
  justify-content: flex-end;
}
.his-body {
  padding: 20px 0;
  background-color: #fff;
  height: calc(100vh - 112px);
}
.his-chart {
  height: 100%;
}

</style>
